<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>日期和星期</title>
	</head>
	<style>
		/* 179000845江沿蒙 */
		.data{
			width:150px;
			height:140px;
			background-image: url(img/cald.png);
			background-repeat: no-repeat;
		}
		#a1{
			height: 30px;
			color: white;
			text-align: center;
			line-height:30px;
		}
		#a2{
			height: 60px;
			color:black;
			text-align: center;
			font-size: 60px;
			top:5px;
		}
		#b{
			width: 250px;
			height: 150px;
			background-image: url(img/clock.png);
			background-repeat: no-repeat;
			color:white;
			font-size: 50px;
			text-align: center;
			line-height: 150px;
		}
	</style>
	<body>
		<div class="data">
			<div id="a1"></div>
			<div id="a2"></div>
		</div>
		
		<div id="b"></div>
	</body>
</html>

<script type="text/javascript">
	var a1=document.getElementById("a1");
	var a2=document.getElementById("a2");
	var b=document.getElementById("b");
	var date=new Date();
	var week=date.getDay();
	var h=date.getHours();
	var m=date.getMinutes();
	var s=date.getSeconds();
	
	var time='';
	console.log(time);
	
	switch(week){
		// 获取星期
	case 0:a1.innerHTML="星期日";break;	
	case 1:a1.innerHTML="星期一";break;
	case 2:a1.innerHTML="星期二";break;
	case 3:a1.innerHTML="星期三";break;
	case 4:a1.innerHTML="星期四";break;
	case 5:a1.innerHTML="星期五";break;
	case 6:a1.innerHTML="星期六";break;
	}
	a2.innerHTML=date.getDate();
	
	setInterval(function(){
		var date=new Date();
		var h=date.getHours();
		var m=date.getMinutes();
		var s=date.getSeconds();
		if(s<10){
			// 不足两位的补0
			s="0"+s;		
		}
		if(m<10){
			m="0"+m;		
		}
		if(h<10){
			h="0"+h;
		}
		time=h+":"+m+":"+s;
		b.innerHTML=time;
		
		
	},1000);
	

</script>